<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>

	<!-- Basic Page Needs
	================================================== -->
	<meta charset="utf-8">
    <title>BizCraft - Responsive Html5 Template</title>
    <meta name="description" content="">
	<meta name="author" content="">

	<!-- Mobile Specific Metas
	================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- Favicons
	================================================== -->
	<link rel="icon" th:href="@{/project/img/favicon/favicon-32x32.png}" type="image/x-icon" />
	<link rel="apple-touch-icon-precomposed" sizes="144x144" th:href="@{/project/img/favicon/favicon-144x144.png}">
	<link rel="apple-touch-icon-precomposed" sizes="72x72" th:href="@{/project/img/favicon/favicon-72x72.png}">
	<link rel="apple-touch-icon-precomposed" th:href="@{/project/img/favicon/favicon-54x54.png}">



</head>

<body>
<div th:replace="/project/layout/css :: css"></div>
	<div class="body-inner">
	<!-- Header start -->
	<header id="header" class="navbar-fixed-top header" role="banner" th:replace="/project/layout/header :: header"></header>

	<div id="banner-area">
		<img th:src="@{/project/images/banner/banner2.jpg}" alt ="" />
		<div class="parallax-overlay"></div>
			<!-- Subpage title start -->
			<div class="banner-title-content">
	        	<div class="text-center">
		        	<h2>Portfolio Static</h2>
		        	<ul class="breadcrumb">
			            <li>Home</li>
			            <li>Portfolio</li>
			            <li><a href="#"> Portfolio Static</a></li>
		          	</ul>
	          	</div>
          	</div><!-- Subpage title end -->
	</div><!-- Banner area end -->


	<!-- Portfolio start -->
	<section id="main-container" class="portfolio-static">
		<div class="container">
			<div class="row">
				<div class="col-sm-3 portfolio-static-item">
					<div class="grid">
						<figure class="effect-oscar">
							<img th:src="@{/project/images/portfolio/portfolio1.jpg}" alt="">
							<figcaption>
								<a class="link icon-pentagon" th:href="@{/portfolio-item.html}"><i class="fa fa-link"></i></a>
								<a class="view icon-pentagon" data-rel="prettyPhoto" th:href="@{/project/images/portfolio/portfolio-bg1.jpg}"><i class="fa fa-search"></i></a>
							</figcaption>
						</figure>
						<div class="portfolio-static-desc">
							<h3>Startup Business</h3>
							<span><a href="#">Illustrations</a></span>
						</div>
					</div><!--/ grid end -->
				</div><!--/ item 1 end -->

				<div class="col-sm-3 portfolio-static-item">
					<div class="grid">
						<figure class="effect-oscar">
							<img th:src="@{/project/images/portfolio/portfolio2.jpg}" alt="">
							<figcaption>
								<a class="link icon-pentagon" th:href="@{/portfolio-item.html}"><i class="fa fa-link"></i></a>
								<a class="view icon-pentagon" data-rel="prettyPhoto" th:href="@{/project/images/portfolio/portfolio-bg2.jpg}"><i class="fa fa-search"></i></a>
							</figcaption>
						</figure>
						<div class="portfolio-static-desc">
							<h3>Easy to Lanunch</h3>
							<span><a href="#">Webdesign</a></span>
						</div>
					</div><!--/ grid end -->
				</div><!--/ item 2 end -->

				<div class="col-sm-3 portfolio-static-item">
					<div class="grid">
						<figure class="effect-oscar">
							<img th:src="@{/project/images/portfolio/portfolio3.jpg}" alt="">
							<figcaption>
								<a class="link icon-pentagon" th:href="@{/portfolio-item.html}"><i class="fa fa-link"></i></a>
								<a class="view icon-pentagon" data-rel="prettyPhoto" th:href="@{/project/images/portfolio/portfolio-bg3.jpg}"><i class="fa fa-search"></i></a>
							</figcaption>
						</figure>
						<div class="portfolio-static-desc">
							<h3>Your Business</h3>
							<span><a href="#">Ui Elements</a></span>
						</div>
					</div><!--/ grid end -->
				</div><!--/ item 3 end -->

				<div class="col-sm-3 portfolio-static-item">
					<div class="grid">
						<figure class="effect-oscar">
							<img th:src="@{/project/images/portfolio/portfolio4.jpg}" alt="">
							<figcaption>
								<a class="link icon-pentagon" th:href="@{/portfolio-item.html}"><i class="fa fa-link"></i></a>
								<a class="view icon-pentagon" data-rel="prettyPhoto" th:href="@{/project/images/portfolio/portfolio-bg1.jpg}"><i class="fa fa-search"></i></a>
							</figcaption>
						</figure>
						<div class="portfolio-static-desc">
							<h3>Prego Match</h3>
							<span><a href="#">Media Elements</a></span>
						</div>
					</div><!--/ grid end -->
				</div><!--/ item 4 end -->

				<div class="col-sm-3 portfolio-static-item">
					<div class="grid">
						<figure class="effect-oscar">
							<img th:src="@{/project/images/portfolio/portfolio5.jpg}" alt="">
							<figcaption>
								<a class="link icon-pentagon" th:href="@{/portfolio-item.html}"><i class="fa fa-link"></i></a>
								<a class="view icon-pentagon" data-rel="prettyPhoto" th:href="@{/images/portfolio/portfolio-bg2.jpg}"><i class="fa fa-search"></i></a>
							</figcaption>
						</figure>
						<div class="portfolio-static-desc">
							<h3>Fashion Brand</h3>
							<span><a href="#">Graphics Media</a></span>
						</div>
					</div><!--/ grid end -->
				</div><!--/ item 5 end -->

				<div class="col-sm-3 portfolio-static-item">
					<div class="grid">
						<figure class="effect-oscar">
							<img th:src="@{/project/images/portfolio/portfolio6.jpg}" alt="">
							<figcaption>
								<a class="link icon-pentagon" th:href="@{/portfolio-item.html}"><i class="fa fa-link"></i></a>
								<a class="view icon-pentagon" data-rel="prettyPhoto" th:href="@{/project/images/portfolio/portfolio-bg3.jpg}"><i class="fa fa-search"></i></a>
							</figcaption>
						</figure>
						<div class="portfolio-static-desc">
							<h3>The Insidage</h3>
							<span><a href="#">Material Design</a></span>
						</div>
					</div><!--/ grid end -->
				</div><!--/ item 6 end -->

				<div class="col-sm-3 portfolio-static-item">
					<div class="grid">
						<figure class="effect-oscar">
							<img th:src="@{/project/images/portfolio/portfolio7.jpg}" alt="">
							<figcaption>
								<a class="link icon-pentagon" th:href="@{/portfolio-item.html}"><i class="fa fa-link"></i></a>
								<a class="view icon-pentagon" data-rel="prettyPhoto" th:href="@{/project/images/portfolio/portfolio-bg1.jpg}"><i class="fa fa-search"></i></a>
							</figcaption>
						</figure>
						<div class="portfolio-static-desc">
							<h3>Light Carpet</h3>
							<span><a href="#">Mockup</a></span>
						</div>
					</div><!--/ grid end -->
				</div><!--/ item 7 end -->

				<div class="col-sm-3 portfolio-static-item">
					<div class="grid">
						<figure class="effect-oscar">
							<img th:src="@{/project/images/portfolio/portfolio8.jpg}" alt="">
							<figcaption>
								<a class="link icon-pentagon" th:href="@{/portfolio-item.html}"><i class="fa fa-link"></i></a>
								<a class="view icon-pentagon" data-rel="prettyPhoto" th:href="@{/project/images/portfolio/portfolio-bg2.jpg}"><i class="fa fa-search"></i></a>
							</figcaption>
						</figure>
						<div class="portfolio-static-desc">
							<h3>Amazing Keyboard</h3>
							<span><a href="#">Photography</a></span>
						</div>
					</div><!--/ grid end -->
				</div><!--/ item 8 end -->

			</div><!-- Content row end -->
		</div><!-- Container end -->
	</section><!-- Portfolio end -->

	<div class="gap-40"></div>

		<footer id="footer" class="footer" th:replace="/project/layout/footer :: footer"></footer>
		<section id="copyright" class="copyright angle" th:replace="/project/layout/footer :: copyright"></section>
		<div th:replace="/project/layout/js :: js"></div>
	</div><!-- Body inner end -->
</body>
</html>
